<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/health/libs/common.css">
<style>
    #notification-index {
        font-family: Source Han Sans SC;
        color: #666;
        background: #fff;
        border-radius: 6px;
        padding: 0 20px 20px;
        font-size: 14px;
        overflow: auto;
    }

    /* .fans-body {
        height: calc(100vh - 280px);
    } */

    .common-btn {
        background: #7536D0;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        width: 88px;
        cursor: pointer;
    }

    /* title */
    .title-tip {
        font-weight: 600;
        padding: 18px 0;
    }

    .title-opt {
        display: flex;
        justify-content: space-between;
        padding-bottom: 20px;
    }

    .title-opt .el-input__inner,
    .title-opt .el-input {
        height: 30px;
        line-height: 30px;
        width: 236px;
    }

    .title-opt .el-input__icon {
        line-height: 30px;
    }

    .sync-btn {
        width: 100px;
        height: 32px;
        line-height: 32px;
        font-size: 12px;
    }

    .view-btn {
        color: #7536D0;
        cursor: pointer;
    }

    .avatar-img {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid #E6E6E6;
    }

    .sex-img {
        width: 15px;
        height: 15px;
        margin: 0 20px;
    }

    /* footer */
    .fans-footer {
        padding-top: 20px;
        display: flex;
        justify-content: flex-end;
    }

    .el-pager li.active,
    .el-pager li:hover,
    .el-select-dropdown__item.selected {
        color: #7536D0;
    }

    .el-input__inner:hover,
    .el-input__inner:focus,
    .el-select .el-input.is-focus .el-input__inner,
    .el-select .el-input.is-hover .el-input__inner,
    .el-pagination__sizes .el-input .el-input__inner:hover {
        border-color: #7536D0;
    }

    /* table */
    .el-table td,
    .el-table th {
        border-right: none;
    }

    .el-table th {
        background: #F9F9F9;
        height: 40px;
        padding: 8px 0;
    }

    .el-table td {
        padding: 8px 0 9px;
    }

    .el-table .cell {
        padding-left: 20px !important;
        font-size: 13px;
        color: #444;
        font-weight: 500;
        text-align: center;
    }

    .table-head-tip {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .table-head-tip img {
        margin-right: 12px;
    }

    .tips {
        padding: 16px;
        border-radius: 5px;
        background-color: #F1EBFA;
        position: relative;
        margin-bottom: 20px;
        font-size: 12px;
    }

    .tip-a,
    .tip-a:hover {
        color: #7536D0;
    }

    .tip-close {
        color: #7536D0;
        position: absolute;
        top: 16px;
        right: 16px;
    }

    .notification-btn {
        justify-content: flex-end;
        display: flex;
    }

    .notification-btn-1 {
        color: #7438D5;
        /* float: right; */
        line-height: 36px;
        background: #fff;
    }

    .notification-btn-2 {
        width: 90px;
        height: 36px;
        background: #7438D5;
        font-size: 16px;
        color: #fff;
        line-height: 36px;
        border-radius: 18px;
        /* float: right; */
    }

    .add-btn {
        border: 1px solid #7438D5;
        border-radius: 4px;
        color: #7438D5;
        height: 32px;
        line-height: 30px;
        background: #fff;
        cursor: pointer;
    }

    .add-btn i {
        margin-right: 5px;
        color: #7438D5;
    }

    .notification-items {
        display: flex;
        align-items: center;
    }

    .div-body {
        /* border: 1px solid#E6E6E6; */
        border-bottom: none;
        margin: 20px 0 14px;
        max-height: 355px;
        overflow: auto;
    }

    .div-body-item {
        display: flex;
        align-items: center;
        height: 59px;
    }

    .first-item {
        width: 102px;
    }

    .table-item-with {
        width: 186px;
    }

    .el-dialog {
        width: 600px;
        height: 602px;
        border-radius: 10px;
    }

    .display-flex {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .item-btn {
        border-radius: 4px;
        height: 32px;
        display: flex;
        width: 180px;

    }

    .wx-config {
        width: 80px;
        line-height: 32px;
        background: #04C261;
        text-align: center;
        color: #fff;
        cursor: pointer;
        border-radius: 4px 0 0 4px;
    }

    .wx-send {
        width: 130px;
        line-height: 32px;
        background: #EAFAF2;
        color: #04C261;
        text-align: center;
        font-size: 12px;
        border-radius: 0 4px 4px 0;
    }

    .wxmin-config {
        background: #6D74F0;
    }

    .wxmin-send {
        background: #ECEDFD;
        color: #6D74F0;
    }

    .note-config {
        background: #7536D0;
    }

    .note-send {
        background: #EDE5F9;
        color: #7536D0;
    }

    .email-config {
        background: #328AF7;
    }

    .email-send {
        background: #DEECFE;
        color: #328AF7;
    }

    .notification-titles {
        margin-right: 40px;
    }

    .el-dialog__title {
        font-size: 14px;
    }

    .el-dialog__body {
        font-size: 13px;
    }

    .el-dialog__headerbtn .el-dialog__close {
        font-size: 18px;
    }

    .el-dialog__headerbtn .el-dialog__close:hover {
        color: #7438D5;
    }

    .del-btn-field {
        width: 18px;
        height: 18px;
        margin-left: 14px;
        background: rgb(255, 89, 89);
        color: rgb(255, 255, 255);
        text-align: center;
        font-size: 12px;
        border-radius: 50%;
    }

    .div-body::-webkit-scrollbar {
        width: 6px;
    }

    .div-body::-webkit-scrollbar-thumb {
        width: 6px;
        background: #e6e6e6;
        height: 20px;
        border-radius: 3px;
    }

    .email-bodys::-webkit-scrollbar {
        width: 6px;
    }

    .email-bodys::-webkit-scrollbar-thumb {
        width: 6px;
        background: #e6e6e6;
        height: 20px;
        border-radius: 3px;
    }

    .email-bodys {
        overflow: auto;
        max-height: 420px;
        padding: 0 20px 20px;
    }

    .flex-1 {
        flex: 1;
    }

    [v-cloak] {
        display: none
    }
</style>
<style>
    #configIndex {
        background: #fff;
        border-radius: 10px 10px 0px 0px;
        color: #444;
        font-weight: 500;
    }

    .el-tabs__nav {
        margin-left: 30px;
    }

    .el-tabs__header {
        margin-bottom: 0;
    }

    .el-tabs__item {
        margin-bottom: 8px;
        width: 120px;
    }

    .el-tabs__active-bar {
        width: 80px !important;
        left: 10px;
        height: 3px;
    }

    .el-tabs--top .el-tabs__item.is-top:last-child {
        padding-right: 20px;
    }

    .custom-tabs {
        padding-top: 12px;
    }

    .custom-body {
        padding: 30px 30px 0;
    }

    .tip-container {
        padding: 0 10px;
    }

    .config-item {
        width: 100%;
        /* max-width: 370px; */
        height: 254px;
        border-radius: 20px;
        padding: 0 10px 24px;
        margin-bottom: 30px;
        display: flex;
        align-items: stretch;
        color: #fff;
        justify-content: space-between;
    }

    .config-item-icon-container {
        /* width: 48px; */
        height: 48px;
    }

    .config-title {
        font-size: 22px;
        margin-top: 28px;
    }

    .config-tip {
        font-size: 14px;
        color: rgba(255, 255, 255, 0.8);
        margin-top: 14px;
    }

    .config-message {
        font-size: 14px;
        max-width: 170px;
        margin-top: 26px;
    }

    .set-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .config-item-btn {
        width: 98px;
        height: 40px;
        border-radius: 20px;
        font-size: 14px;
        cursor: pointer;
    }

    .item-icon-1 {
        width: 48px;
        height: 48px;
        border-radius: 50%;
    }

    .item-icon-1 img {
        width: 100%;
        height: 100%;
    }

    .item-icon-2 {
        width: 48px;
        height: 48px;
        background: #fff;
        border-radius: 50%;
        position: absolute;
        left: 36px;
        opacity: 0.5;
    }

    .config-item-leaf-container {
        display: flex;
        flex: 1;
    }

    .leaf {
        width: 54px;
        height: 54px;
    }

    .leaf-11 {
        background: rgba(255, 255, 255, 0.2);
        border-radius: 0px 34px;
    }

    .leaf-12 {
        border-radius: 0px 35px;
        transform: matrix(-1, 0, 0, 1, 0, 0);
    }

    .leaf-13 {
        background: rgba(255, 255, 255, 0.66);
        border-radius: 0px 34px;
    }

    .item-leaf-2 {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.4);
        border-radius: 6px;
        transform: rotate(-45deg);
        margin-top: 86px;
        margin-left: 10px;
    }

    .config-item {
        cursor: pointer;
        transition: all 0.2s;
    }

    .config-item:hover {
        transform: scale(1.05);
        filter: drop-shadow(0px 1px 8px rgba(0, 0, 0, 0.1));
    }

    [v-cloak] {
        display: none
    }
</style>
<script src="__CDN__/assets/addons/health/libs/vue.js"></script>
<script src="__CDN__/assets/addons/health/libs/element/element.js"></script>
<script src="__CDN__/assets/addons/health/libs/moment.js"></script>
<!-- 内容 -->
<div id="configIndex" v-cloak>
    <div class="custom-tabs">
        <el-tabs v-model="activeName" @tab-click="tabClick">
            <el-tab-pane label="基础配置" name="basic"></el-tab-pane>
            <el-tab-pane label="平台配置" name="platform"></el-tab-pane>
        </el-tabs>
    </div>
    <div class="custom-body">
        <el-row :gutter="30">
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-for="(item, baseIndex) in configData[activeName]">
                <div class="config-item" :style="{background:item.background}">
                    <div class="tip-container">
                        <div class="config-item-icon-container"
                            style="margin-top: 30px;position: relative;display: flex;">
                            <div class="item-icon-1"><img :src="'/assets/addons/health/img/config/'+item.icon+'.png'" />
                            </div>
                            <div class="item-icon-2"></div>
                        </div>
                        <div class="config-title">{{item.title}}</div>
                        <div class="config-tip ellipsis-item">{{item.tip}}</div>
                        <div class="config-message ellipsis-item">{{item.message}}</div>
                    </div>
                    <div class="set-container">
                        <div class="config-item-leaf-container">
                            <div class="item-leaf-1">
                                <div class="leaf leaf-11"></div>
                                <div class="leaf leaf-12" :style="{background:item.leaf}"></div>
                                <div class="leaf leaf-13"></div>
                            </div>
                            <div class="item-leaf-2"></div>
                        </div>
                        <div v-if="item.id!='apple'" class="config-item-btn display-flex-c" :style="item.button"
                            @click="operation(item.id,item.title)">{{item.buttonMessage?item.buttonMessage:'立即设置'}}
                        </div>
                        <div v-if="item.id=='apple'" class="config-item-btn display-flex-c" :style="item.button">暂未开通
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
    </div>
</div>